<template>
  <div>
    <div class="top">
      <!-- 搜索框 -->

      <el-select
        v-model="form.shId"
        placeholder="请选择学校"
        @change="searchlistBySchoolId"
      >
        <el-option
          v-for="item in schoolList"
          :key="item.shId"
          :label="item.shName"
          :value="item.shId"
        >
        </el-option>
      </el-select>
    </div>

    <div class="biaoge">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'rgba(61,157,255,0.05)',
          color: '#333333',
        }"
      >
        <el-table-column prop="equipmentName" label="设备名称" align="center">
        </el-table-column>
        <el-table-column prop="equipmentCode" label="设备标识码" align="center">
        </el-table-column>
        <el-table-column prop="equipmentType" label="设备类型" align="center">
          <template slot-scope="scope">
            {{ getSource(scope.row.equipmentType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="equipmentAddress"
          label="设备地址"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="equipmentRemarks"
          label="设备备注"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="equipmentQrCode"
          label="大屏二维码"
          align="center"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.equipmentQrCode"
              v-image-preview
              alt=""
              class="img"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="schoolName"
          label="所属学校"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="自主运动状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mainType"
              active-color="#13ce66"
              active-value="1"
              inactive-value="0"
              @change="changeScreenStatus(scope.row)"
            >
            </el-switch>

          </template>
        </el-table-column>
        <el-table-column prop="stuus" label="操作" align="center" width="205px">
          <template slot-scope="scope">
            <el-button type="primary" @click="open(scope.row)" size="small"
              >待机管理</el-button
            >
            <el-button type="primary" @click="opens" size="small"
              >重置二维码</el-button
            >

          </template>
        </el-table-column>
      </el-table>
      <pagination-page @size="changeSize" @page="changePage" :total="total" />
    </div>

    <div>
      <el-dialog title="设备详情" :visible.sync="dialogVisible" width="700px">
        <el-form
          label-position="left"
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="90px"
        >
          <el-form-item label="待机画面：" prop="equipmentImgUrl">
            <el-upload
              style="width: 300px; height: 200px"
              class="upload-demo"
              drag
              :show-file-list="false"
              :on-success="picUpload"
              :before-upload="beforeUpload"
              :action='$env.BASE_URL+"/homework/zhty/public/import_file"'
              multiple
              :headers="{
                'access-token': $store.state.user.TOKEN,
              }"
            >
              <img
                style="
                  width: auto;
                  height: auto;
                  max-height: 100%;
                  max-width: 100%;
                "
                v-if="form.equipmentImgUrl"
                :src="$store.state.user.BASE_URL + form.equipmentImgUrl"
                alt=""
              />
              <i v-if="!form.equipmentImgUrl" class="el-icon-upload"
                ><div class="cishi">
                  将文件拖到此处，或<span class="cishis">点击上传</span>
                </div>
              </i>

              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，建议不超过500kb
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="待机文字"
            prop="equipmentStandByText"
            style="width: 49%"
          >
            <el-input v-model="form.equipmentStandByText"></el-input>
          </el-form-item>

          <!-- 视频 -->
          <el-form-item
            label="待机视频："
            prop="equipmentVideoUrl"
            style="width: 70%"
          >
            <el-upload
              class="upload-demo"
              drag
              :action='$env.BASE_URL+"/homework/zhty/public/import_file"'
              v-bind:on-progress="uploadVideoProcess"
              v-bind:on-success="handleVideoSuccess"
              v-bind:before-upload="beforeUploadVideo"
              v-bind:show-file-list="false"
              :headers="{
                'access-token': $store.state.user.TOKEN,
              }"
            >
              <!-- <div v-if="!form.video">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将视频拖到此处，或<em>点击上传</em>
              </div>
            </div> -->
              <video
                style="max-height: 100%; max-width: 100%"
                v-if="form.equipmentVideoUrl != '' && !videoFlag"
                v-bind:src="$store.state.user.BASE_URL + form.equipmentVideoUrl"
                class="avatar video-avatar"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-else-if="form.equipmentVideoUrl == '' && !videoFlag"
                class="el-icon-upload"
                ><div class="cishi">
                  将视频拖到此处，或<span class="cishis">点击上传</span>
                </div>
              </i>

              <el-progress
                v-if="videoFlag == true"
                type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top: 7px"
              ></el-progress>
            </el-upload>
            <p class="Upload_pictures">
              <span></span>
              <span class="stp"
                >最多可以上传1个视频，建议大小50M，推荐格式mp4</span
              >
            </p>
          </el-form-item>

          <el-form-item
            label="备注："
            prop="equipmentRemarks"
            style="width: 49%"
          >
            <el-input v-model="form.equipmentRemarks"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button size="small" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="add">添 加</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { messagelist, searchlist, xialalist,changeScreenType } from "@/api/equipmentmanag/index";
export default {
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      total: -1,
      page: {
        pageSize: 10,
        pageIndex: 1,
      },
      schoolList: [],
      form: {
        equipmentId: "",
        equipmentName: "",
        equipmentCode: "",
        equipmentAddress: "",
        equipmentRemarks: "",
        equipmentQrCode: null,
        equipmentSchoolId: "",
        equipmentImgUrl: "",
        equipmentVideoUrl: "",
        equipmentStandByText: "",
        equipmentType: null,
      },
      rules: {
        equipmentStandByText: [
          {
            required: true,
            message: "请输入待机文字",
            trigger: "blur",
          },
        ],

        equipmentRemarks: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        equipmentImgUrl: [
          {
            required: true,
            message: "请上传待机画面",
            trigger: "blur",
          },
        ],
        equipmentVideoUrl: [
          {
            required: true,
            message: "请上传待机视频",
            trigger: "blur",
          },
        ],
      },
      name: "",
      tableData: [],
      dialogVisible: false,
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
    };
  },
  created() {
    this.equipmentinformationlist();
    this.getSelectSchools();
  },
  methods: {
    changeScreenStatus(row){
      changeScreenType({equipmentId:row.equipmentId}).then(response=>{
        if(response.code == 200){
          this.$message.success("修改成功");
          this.equipmentinformationlist();
        }
      })
    },
    //  二维码重置
      opens() {
        this.$confirm('确定重置二维码吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置'
          });
        });
      },
    //  设备信息管理列表
    equipmentinformationlist(val) {
      let data = {
        schoolId: val,
        ...this.page
      };
      searchlist(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
          this.total = res.total;
        }
      });
    },
    // 大屏状态
    getSource(val) {
      if (val == 0) {
        return "大屏";
      }
    },


    // 修改
    add() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          let data = {
            ...this.form,
          };
          {
            messagelist(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success("修改成功");
                this.equipmentinformationlist();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        }
      });
    },
    open(val) {
      this.form = val;
      this.dialogVisible = true;
    },
    //  照片上传
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const types = ["jpeg", "jpg", "png"];
      if (!types.includes(fileSuffix)) {
        this.$message.error(`文件只能是 ${types.join()} 格式!`);
      }
      return types.includes(fileSuffix);
    },
    // 上传图片成功的函数
    picUpload(e, file) {
      if (e.code === 200) {
        this.form.equipmentImgUrl = e.result.pic;
      } else if (e.code === 401) {
        this.$router.replace("/");
        this.$message.error("您的身份信息已过期，请重新登录");
        sessionStorage.removeItem("userInfo");
        sessionStorage.removeItem("token");
        this.$store.commit("user/SET_TOKEN", "");
      } else {
        this.$message.error(e.message);
      }
      this.$refs.ruleForm.validate(() => {});
      this.loading = false;
    },
    //  视频上传
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50; //控制大小  修改50的值即可
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1 //控制格式
      ) {
        layer.msg("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        layer.msg("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      //注意在data中添加对应的变量名
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    // 上传成功回调

    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;

      //后台上传数据
      if (res.code == 200) {
        this.form.equipmentVideoUrl = res.result.pic; //上传成功后端返回视频地址 回显
      } else {
        this.$message.error("上传失败！");
      }
    },
    // 分页器
    changeSize(size) {
      this.page.pageSize = size;
      this.equipmentinformationlist();
    },
    changePage(page) {
      this.page.pageIndex = page;
      this.equipmentinformationlist();
    },

    searchlistBySchoolId(val) {
      this.equipmentinformationlist(val);
    },
    getSelectSchools(val) {
      xialalist({}).then((res) => {
        if (res.code == 200) {
          this.schoolList = res.result;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tops {
  width: 238px;
  height: 32px;
}
.top {
  display: flex;
  justify-content: flex-end;
}
.boss {
  font-size: 12px;
}
.biaoge {
  padding-top: 13px;
}
.saiwen {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.baodan {
  text-align: center;
}
::v-deep .el-form-item {
  margin-left: 25%;
}

.img {
  width: 40px;
  height: 40px;
}
.cishis {
  color: #89b0fd;
}
.cishi {
  font-size: 12px;
  color: #606266;
}
::v-deep .el-upload-dragger {
  width: 235px;
  height: 150px;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
}
::v-deep .el-form-item {
  margin-left: 20%;
}
::v-deep .el-form--label-left .el-form-item__label {
  padding: 0px;
}

// 图片放大
 .vue-directive-image-previewer-body img{
    width: 100px !important;
  height: 100px !important;
  margin: 100px 0 0 180px !important;
  transform: all 2ms ease 2ms !important;
}
// .vue-directive-image-previewer-img {
//   max-width: 100px !important;
//   max-height: 100px !important;
//   margin: 100px 0 0 180px !important;
//   transform: all 2ms ease 2ms !important;
// }
::v-deep.el-table::before {
  width: 0px !important;
  height: 0px !important;
}

</style>
